<script setup lang="tsx">
  import { h } from 'vue';
  import { BasicTree, TreeActionItem, ContextMenuItem } from '@/components/Tree';
  import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import { EventDataNode } from 'ant-design-vue/es/vc-tree/interface';
  import { PageWrapper } from '@/components/Page';
  import { treeData } from './data/data';

  const actionList: TreeActionItem[] = [
    {
      // show: () => boolean,
      render: (node) => {
        return h(PlusOutlined, {
          class: 'ml-2',
          onClick: () => {
            handlePlus(node);
          },
        });
      },
    },
    {
      render: () => {
        return h(DeleteOutlined);
      },
    },
  ];

  function getRightMenuList(node: EventDataNode): Promise<ContextMenuItem[]> {
    const menu = [
      {
        label: '新增',
        handler: () => {
          console.log('点击了新增', node);
        },
        icon: 'bi:plus',
      },
      {
        label: '编辑',
        handler: () => {
          console.log('点击了新增', node);
        },
        icon: 'basil:edit-alt-outline',
      },
      {
        label: '删除',
        handler: () => {
          console.log('点击了删除', node);
        },
        icon: 'basil:trash-outline',
      },
    ];
    return new Promise((resolve) => {
      resolve(menu);
    });
  }

  function handlePlus(node: any) {
    console.log(node);
  }

  function createIcon({ level }) {
    if (level === 1) {
      return 'ion:git-compare-outline';
    }
    if (level === 2) {
      return 'ion:home';
    }
    if (level === 3) {
      return 'ion:airplane';
    }
    return '';
  }
</script>
<template>
  <PageWrapper>
    <BasicTree
      title="商品分类"
      :treeData="treeData"
      :actionList="actionList"
      :renderIcon="createIcon"
      :beforeRightClick="getRightMenuList"
      class="pl-2 pr-2"
    />
  </PageWrapper>
</template>
